<template>
    <div id="content-item">
        <slot name="radio">

        </slot>
        <!--                   Task      -->
        <div class="textC">
                            <span>
                                Task
                            </span>
        </div>

        <div class="studies_text">
            <!--                    标题:    云台山研学计划6-->
            <div class="studies-title">
                <span>云台山研学计划6</span>
            </div>
            <!--                            人数 年级-->
            <div class="studies_number">
                三年级 89人
            </div>
        </div>
        <!--                        审核编号-->
        <div class="audit-id">
            审批编号：ZZDBCJZX001
        </div>
        <!--                        负责人信息-->
        <div class="r_person-info">
            <div class="r_person-name">
                李明
            </div>
            <div class="r_person-phone">
                18900000000
            </div>
        </div>
        <!--                        开始时间-->
        <div class="start-time">
            <div class="start-time-text">
                开始时间
            </div>
            <div class="time">
                2019-06-16 14:03
            </div>
        </div>
        <!--                        结束时间-->
        <div class="end-time">
            <div class="end-time-text">
                结束时间
            </div>
            <div class="time">
                2019-06-18 18:03
            </div>
        </div>
        <div class="options">
            <div class="link">
                <el-link type="primary" @click="showDetails">查看</el-link>
            </div>
            <div class="link">
                <slot name="option">

                </slot>
            </div>

        </div>
    </div>
</template>

<script>
    import {Link} from "element-ui";
    export default {
        name: "Item",
        components: {
            "el-link":Link,
        },
        methods:{
            showDetails(){
                this.$emit("show-details");
            }
        }
    }
</script>

<style lang="less">
    #content-item {
        display: flex;
        border-bottom: .5px solid #eee;
        padding-bottom: 20px;
        margin-top: 20px;
    }

    .textC {
        width: 48px;
        height: 48px;
        color: rgba(255, 255, 255, 1);
        background-color: rgba(89, 126, 247, 1);
        border-radius: 4px;
        font-size: 15px;
        line-height: 48px;
        text-align: center;
        margin-left: 50px;
    }

    .studies_text {
        margin-left: 30px;
        color: rgba(0, 0, 0, 0.45);

    .studies-title {
        font-size: 15px;
    }

    .studies_number {
        font-size: 14px;
        margin-top: 10px;
    }
    }

    .audit-id {
        margin-left: 30px;
        line-height: 20px;
        text-align: center;
        margin-top: 5px;
        color: rgba(0, 0, 0, 1);
        font-size: 14px;
    }

    .r_person-info {
        margin-left: 30px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;

    .r_person-phone {
        margin-top: 10px;
    }
    }

    .start-time, .end-time {
        margin-left: 30px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;

    .time {
        margin-top: 10px;
    }
    }
    .options{
        display: flex;
        margin-left: 80px;
    .link{
        margin-top: 10px;
        margin-left: 20px;
    }
    }

</style>
